<template>
  <div>
    <div class="indexUser">
      <div>
        <!-- header  点击 -->
        <headers :userList="userList"></headers>
      </div>
      <div class="bg1 userBox">
        <div class="wrap bgw appay">
          <div class="checking">
            <el-steps :active="state" align-center>
              <el-step title="选择入驻" description></el-step>
              <el-step title="填写资料" description></el-step>
              <el-step title="等待审核" description></el-step>
            </el-steps>
          </div>
          <div v-if="state == 1" class="stepOne">
            <div @click="selectTab(1)" class="fl">
              <img src="@/assets/image/Settledin_Doctor_icon@2x.png" alt />
              <p>医生入驻</p>
              <p>入驻成为问诊医生、进行线上问诊流程</p>
            </div>
            <div @click="selectTab(2)" class="fr">
              <img src="@/assets/image/Settledin_Doctor_icon@2x.png" alt />
              <p>专家入驻</p>
              <p>入驻成为问诊专家、进行线上问诊流程</p>
            </div>
          </div>
          <div v-if="state == 2" class="stepTwo">
            <div class="box">
              <div class="fl">姓名</div>
              <div class="fl">
                <input v-model="realname" type="text" maxlength="12" />
              </div>
            </div>
            <div class="box">
              <div class="fl">手机号</div>
              <div class="fl">
                <input v-model="mobile" type="text" maxlength="11" />
              </div>
            </div>
            <!-- 资质图片 -->
            <div class="checkingImg">
              <div class="fl">资质证明</div>
              <div class="fl imgList">
                <el-upload
                  :action="imageUrl"
                  list-type="picture-card"
                  :on-success="ListImgSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="ListImgRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
            <div class="box">
              <div class="fl">资质简介</div>
              <div class="fl">
                <input v-model="zizhi_desc" type="text" />
              </div>
            </div>
            <div class="box">
              <div class="fl">个人简介</div>
              <div class="fl">
                <input v-model="jianjie" type="text" />
              </div>
            </div>
            <div class="box">
              <div class="fl">身份证号码</div>
              <div class="fl">
                <input v-model="idcard_no" type="text" maxlength="18" />
              </div>
            </div>
            <div class="box">
              <div class="fl w">医生职业医疗机构代码</div>
              <div class="fl">
                <input v-model="jigou_code" type="text" />
              </div>
            </div>
            <div class="box">
              <div class="fl w">医生职业医疗机构名称</div>
              <div class="fl">
                <input v-model="jigou_name" type="text" />
              </div>
            </div>
            <div class="checkingImg userImg">
              <div class="fl">头像</div>
              <div class="fl">
                <el-upload
                  :action="imageUrl"
                  list-type="picture-card"
                  :on-success="UserImgSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="UserImgtRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
            <div class="box select">
              <div class="fl">问诊科目</div>
              <div class="fl">
                <el-select v-model="category_id" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in arr1"
                    :key="index"
                    :label="item[1]"
                    :value="item[0]"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="box">
              <div class="fl"></div>
              <div class="fl">
                <button @click="checking()">申请</button>
              </div>
            </div>
          </div>
          <!-- 审核结果 -->
          <div v-if="state == 3" class="stepThree">
            <div v-if="type == 0" class="box box0">
              <img src="@/assets/image/Settledin_waitfor_img@2x.png" alt />
              <p>已提交申请，等待审核</p>
            </div>
            <div v-if="type == 1" class="box">
              <img src="@/assets/image/Settledin_fail_img@2x.png" alt />
              <p>医生认证申请失败</p>
              <p @click="state = 1">重新提交申请</p>
            </div>
             <div v-if="type == 2" class="box">
              <img src="@/assets/image/ShoppingCart_Success@2x.png" alt />
              <p>医生认证申请成功</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <publicBottom></publicBottom>
      </div>
    </div>
  </div>
</template>
<script>
import headers from "./header"; // 头部 TOP 和header
import publicBottom from "@/components/public/public_bottom"; //底部
import { getApplyInfo } from "@/request/user"; // 查询 申请医生的 状态值
import { keshi_list } from "@/request/user"; // 申请 医生列表
import { apply_yisheng } from "@/request/user"; // 申请 医生
import { usergetinfo } from "@/request/user";

export default {
  components: {
    headers,
    publicBottom
  },
  data() {
    return {
      userList: [], // 个人信息
      state: 1, // 步骤
      type: 0, // 等待 还是 成功 还是 失败
      UserImg: [],
      playType: 0, //1 是医生  2是 专家
      arr1: [], // 科室选择
      realname: "", // 姓名
      mobile: "", // 手机号
      zizhi_desc: "", //资质 简介
      zizhi_pic: [], //资质 图片
      jianjie: "", //简介
      idcard_no: "", // 身份证号
      jigou_code: "", // 诊疗医师执业医疗机构代码
      jigou_name: "", // 机构名称
      avatar: "", //      头像
      category_id: "", //问诊类别
      cert_type: -1 //  角色 1 医生 2 专家
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }

    this.init();
    this.start();
    // this.state=this.$route.query.state
  },
  methods: {
    checking() {
      if (this.realname == "") {
        this.$message.error("名字不能为空");
        return;
      } else if (this.mobile == "") {
        this.$message.error("手机号不能为空");
        return;
      } else if (this.zizhi_desc == "") {
        this.$message.error("资质简介不能为空");
        return;
      } else if (this.zizhi_pic == "") {
        this.$message.error("资质图片不能为空");
        return;
      } else if (this.jianjie == "") {
        this.$message.error("个人简介不能为空");
        return;
      } else if (this.idcard_no == "") {
        this.$message.error("身份证号不能为空");
        return;
      } else if (this.jigou_code == "") {
        this.$message.error("诊疗医师执业医疗机构代码");
        return;
      } else if (this.jigou_name == "") {
        this.$message.error("机构名称");
        return;
      } else if (this.avatar == "") {
        this.$message.error("头像不能为空");
        return;
      } else if (this.category_id == "") {
        this.$message.error("问诊类别不能为空");
        return;
      } else {
        this.send();
      }
    },
    send() {
      let imgData = this.zizhi_pic;
      let arrimg = [];
      for (let i = 0; i < imgData.length; i++) {
        arrimg.push(imgData[i].url);
      }
      arrimg = arrimg.join(",");
      console.log(arrimg);

      apply_yisheng({
        token: this.$tokens,
        realname: this.realname, //姓名
        mobile: this.mobile, // 手机号
        zizhi_desc: this.zizhi_desc, //资质简介
        zizhi_pic: arrimg, //资质 图片
        jianjie: this.jianjie, //个人简介
        idcard_no: this.idcard_no, // 身份证号
        jigou_code: this.jigou_code, //诊疗医师执业医疗机构代码
        jigou_name: this.jigou_name, //机构名称
        avatar: this.avatar, //头像
        category_id: this.category_id, //问诊 类别
        cert_type: this.cert_type //问诊类别
      }).then(res => {
        if (res.code == 1) {
          this.state = 3;
          this.$message({
            message: "发送成功",
            type: "success"
          });
        }
      });
    },
    // 选择  医生 还是 专家
    selectTab(e) {
      this.state = 2;
      this.cert_type = e;
    },
    start() {
      //  查询 申请医生 的 状态
      getApplyInfo({
        token: this.$tokens
      }).then(res => {
        if (res.code == 0) {
          this.state = 1;
        } else if (res.data.status_text == "待审核") {
          this.state = 3;
          this.type = 0;
        } else if (res.data.status_text == "已拒绝") {
          this.state = 3;
          this.type = 1;
        } else if (res.data.status_text == "正常") {
          this.state = 3;
          this.type = 2;
        }
      });
      //   选择 问诊 科室
      keshi_list({}).then(res => {
        let data = res.data;
        for (let i in data) {
          let datas = data[i];
          // console.log(datas);
          for (let j = 0; j < datas.length; j++) {
            let datass = datas[j];
            this.arr1.push(datass);
          }
        }
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //   资质证明 图的 list
    ListImgSuccess(response, file, fileList) {
      let imgurl = response.data.file.url;
      file.url = imgurl;
      this.zizhi_pic = fileList;
    },
    //   资质证明 删除
    ListImgRemove(file, fileList) {
      this.zizhi_pic = fileList;
    },
    //  个人 头像
    UserImgSuccess(response, file) {
      let imgurl = response.data.file.url;
      file.url = imgurl;
      this.avatar = response.data.file.url;
    },
    // 个人头像 删除
    UserImgtRemove() {
      this.avatar = "";
    },
    init() {
      //   个人信息
      usergetinfo({
        token: this.$tokens
      }).then(res => {
        this.userList = res.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.stepThree {
  .box {
    height: 400px;
    text-align: center;
  }
  img {
    width: 108px;
    height: 108px;
    margin-bottom: 20px;
  }
  p {
    margin-bottom: 20px;
    color: #4eeec8;
    font-size: 20px;
  }
  p:nth-of-type(1) {
    color: #313131;
    font-size: 26px;
    margin-bottom: 24px;
  }
  .box0 {
    img {
      height: 20px;
      margin-bottom: 60px;
    }
  }
}
.checkingImg {
  margin-bottom: 36px;
  overflow: hidden;
  .fl:nth-of-type(1) {
    width: 150px;
  }
  .fl:nth-of-type(2) {
    width: 800px;
  }
}
// 步骤2
.stepTwo {
  padding-left: 150px;
  padding-bottom: 60px;
  .box {
    margin-bottom: 36px;
    height: 46px;
    line-height: 46px;
    .fl:nth-of-type(1) {
      width: 150px;
      height: 46px;
    }
    .fl:nth-of-type(2) {
      width: 800px;
    }
  }
  .w {
    width: 190px !important;
  }
  .userImg {
    .fl:nth-of-type(2) {
      width: 156px;
      height: 156px;
      overflow: hidden;
    }
  }
  input {
    border: 1px solid #a8a8a8 !important;
    width: 400px;
    height: 46px;
    box-sizing: border-box;
    font-size: 22px;
    text-indent: 10px;
  }
  .el-select {
    //   background: red;
    box-sizing: border-box;
    padding-left: 2px;
    border: 1px solid #a8a8a8 !important;
  }
  button {
    width: 140px;
    height: 52px;
    border-radius: 4px;
  }
}
//步骤条
.checking {
  padding-top: 64px;
  padding-bottom: 120px;
}
// 步骤1
.stepOne {
  padding-left: 86px;
  padding-right: 86px;
  height: 502px;
  > div {
    width: 502px;
    height: 280px;
    border-radius: 16px;
    font-size: 20px;
    color: white;
    text-align: center;
    padding-top: 50px;
    p:nth-of-type(1) {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 20px;
    }
  }
  img {
    width: 57px;
    height: 63px;
    margin-bottom: 30px;
  }
  .fl {
    background: linear-gradient(
      -56deg,
      rgba(69, 239, 197, 1) 0%,
      rgba(114, 228, 200, 1) 100%
    );
  }
  .fr {
    background: linear-gradient(
      -49deg,
      rgba(80, 175, 229, 1) 0%,
      rgba(125, 190, 227, 1) 100%
    );
  }
}
</style>